<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
	#memberSection{
		padding-right: 10px;
	}
	
	#logoSection{
			margin-top: 30px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: auto;
		width: 940px;
		text-align: center;
	}
	#musicSearchSection{
		margin-top: 70px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: auto;
		padding-left: 270px;
		width: 940px;
		text-align: left;
	}
	#genreSection{
		margin-left: auto;
		margin-right: auto;
		margin-bottom: auto;
		width: 940px;
		text-align: center;
	}
	
	.menubar-custom{
		width: 940px;
		margin: 30px auto;
		position: relative;
		min-height: 52px;
		border: 1px solid transparent;
		background-color: #3fb618;
		border-color: #3fb618;
		border-radius: 0;
	}
	
	.menubar-menu{
		margin: 0;
		padding-left: 0;
	}
	
	.menu-left{
		float: left !important;
	}
	
	.menu-right{
		float: right !important;
	}

	.menubar-menu > li {
		list-style:none;
		float: left;
	}

	.menubar-custom .menubar-menu > .active > a{
		color: #ffffff;
		background-color: #379f15;
	}
	
	.menubar-custom .menubar-menu > li > a {
		color: #ffffff;
		text-decoration: none;
	}

	.menubar-menu > li > a {
		position: relative;
		display: block;
		padding: 10px 15px;
		padding-top: 14.5px;
		padding-bottom: 14.5px;
	}
	
	.menubar-custom .menubar-menu > li > a:hover,
	.menubar-custom .menubar-menu > li > a:focus {
	  color: #ffffff;
	  background-color: #379f15;
	}
	
	.menubar-custom .menubar-menu > .active > a,
	.menubar-custom .menubar-menu > .active > a:hover,
	.menubar-custom .menubar-menu > .active > a:focus {
	  color: #ffffff;
	  background-color: #379f15;
	}
	
	#musicSearch{
		width: 320px;
	}
</style>
<script type="text/javascript">
	$(function(){
		var $ul = "";
		var isClicked=false;
		// 장르 설정 정보 가져오기
		var tempGenre = ${initParam.genre};
		var arrGenre = tempGenre.split(',');
		// 현재 장르 위치
		var curGenre = 0;
		// 장르 초기화
		for(i=curGenre, j=1; i<arrGenre.length, j<=5; i++, j++){
			$("li[title^=genre"+j+"] a").text(arrGenre[i]);
		}

		// 이전 장르
		$("#prevGenre").click(function(){
			if(curGenre > 0) curGenre--;
			
			for(i=curGenre, j=1; i<arrGenre.length, j<=5; i++, j++){
				$("li[title^=genre"+j+"] a").text(arrGenre[i]);
			}
			
			if(curGenre <= 0) $("#prevGenre").attr("class", "disabled");
			if(curGenre < arrGenre.length-5) $("#nextGenre").attr("class", "");
		});//prevGenre click
		
		// 다음 장르
		$("#nextGenre").click(function(){
			if(arrGenre.length-5 > curGenre) curGenre++;
			
			for(i=curGenre, j=1; j<=5, i<arrGenre.length; i++, j++){
				$("li[title^=genre"+j+"] a").text(arrGenre[i]);
			}
			
			if(arrGenre.length-5 <= curGenre) $("#nextGenre").attr("class", "disabled");
			if(curGenre > 0) $("#prevGenre").attr("class", "");
		});//nextGenre click
		
		// 장르 검색
		$("li[title^=genre]").click(function(){
			location.href = "musicboard_pagingContent.ju?nowPage=1&genre="+$(this).text();
		});//genre click
		
		// 검색창을 이용한 검색
		// 아무것도 입력안하면 모든글을 가져옴
		$("#musicSearchBtn").click(function(){
			if(!$("#musicSearch").val()){
				location.href = "musicboard_pagingContent.ju?nowPage=1";
			}else{
				location.href = "musicboard_pagingContent.ju?nowPage=1&title="+$("#musicSearch").val();
			}
		});//musicSearchBtn click
				
		$("#rankView").click(function(){
			$ul = $(this).children("ul");
			$.ajax({
				type:"post",
				url:"musicboard_getRankListByLike.ju",
				dataType:"json",
				success:function(json){
					if(isClicked==false){
						$ul.empty();
						$ul.append("<li style='font-size: 16px; text-align: center'>음악 인기 순위</li>");
						$ul.append("<li  class='divider'></li>");
						$.each(json, function(i, data){
							$ul.append("<li><a href=musicboard_updateHit.ju?boardNo="+data.no+">"+(i+1)+". "+data.title+"<span style='float: right'> +"+data.like+"</span></a></li>");
						});
						$ul.append("<li  class='divider'></li>");
						$ul.append("<li style='font-size: 16px; text-align: center'><button type='button' id='memberRank' class='btn btn-default' style='width: 90%'>회원 인기 순위</button>");
						isClicked = true;
					}
				}
			});

			$ul.on("click", "#memberRank", function(){
				$.ajax({
					type:"post",
					url:"member_getRankListByLike.ju",
					dataType:"json",
					success:function(json){
						$ul.empty();
						$ul.append("<li style='font-size: 16px; text-align: center'>회원 인기 순위</li>");
						$ul.append("<li  class='divider'></li>");
						$.each(json, function(i, data){
							$ul.append("<li>"+data.nickname+" : " + data.like + "</li>");
						});
						$ul.append("<li  class='divider'></li>");
						$ul.append("<li style='font-size: 16px; text-align: center'><button type='button' id='musicRank' class='btn btn-default' style='width: 90%'>음악 인기 순위</button>");
					}
				});
			});
			
			$ul.on("click", "#musicRank", function(){
				$.ajax({
					type:"post",
					url:"musicboard_getRankListByLike.ju",
					dataType:"json",
					success:function(json){
						$ul.empty();
						$ul.append("<li style='font-size: 16px; text-align: center'>음악 인기 순위</li>");
						$ul.append("<li  class='divider'></li>");
						$.each(json, function(i, data){
							$ul.append("<li><a href=musicboard_updateHit.ju?boardNo="+data.no+">"+(i+1)+". "+data.title+"<span style='float: right'> +"+data.like+"</span></a></li>");
						});
						$ul.append("<li  class='divider'></li>");
						$ul.append("<li style='font-size: 16px; text-align: center'><button type='button' id='memberRank' class='btn btn-default' style='width: 90%'>회원 인기 순위</button>");
					}
				});
			});
		});
		
	});//ready
</script>

<div class="navbar navbar-custom" id="memberSection">
	<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="musicboard_pagingContent.ju?nowPage=1">Home</a>
    </div>
    <div class="navbar-collapse navbar-responsive-collapse collapse" style="height: 1px;">
    <ul class="nav navbar-nav navbar-right">
    <c:choose>
<c:when test="${sessionScope.mvo == null }">
    		<li><a href="loginView.ju">로그인</a></li>
    		<li><a href="register.ju">회원가입</a></li>
    		</c:when>
    		<c:otherwise>
    		<li class="navbar-text"><strong>${sessionScope.mvo.nickname }</strong>님</li>
    		<li><a href="logout.ju">로그아웃</a></li>
    		<li class="dropdown">
		        <a href="#" class="dropdown-toggle" data-toggle="dropdown">마이메뉴 <b class="caret"></b></a>
		        <ul class="dropdown-menu">
		         <c:if test="${sessionScope.mvo.grade=='admin'}">
					<li>	<a href="${initParam.root}getAllMemberList.ju?nowPage=1">회원관리</a></li></c:if>
		          <li><a href="${initParam.root}updateView.ju">회원 정보 수정</a></li>
		         <li> <a href="${initParam.root}dropoutMemberView.ju">회원탈퇴</a></li>
				 <li><a href="${initParam.root}myBoarList.ju">내 게시글 보기</a></li>	
		          <li><a href="${initParam.root}myCommentList.ju?">내 댓글 보기</a></li>
		          <li class="divider"></li>
		          <li><a href="playlist_getPlayList.ju">플레이리스트</a></li>
		        </ul>
		      </li>
      </c:otherwise>
    </c:choose>
    </ul>
    </div>
</div>

<div>
<div id="logoSection" style="height: 10px"><img src="${initParam.root }img/juke.jpg"></div>
	<div id="musicSearchSection" style="display: -webkit-box;">
		<span>
			<input type="text" class="form-control col-lg-8" placeholder="search" id="musicSearch">
		</span>
		<span>
			<button type="button" class="btn btn-success" id="musicSearchBtn">검색</button>
		</span>
	</div>
	
	<div id="genreSection">
		<ul class="pagination pagination-sm">
		  <li id="prevGenre" class="disabled"><a href="#">«</a></li>
		  <li title="genre1"><a href="#"></a></li>
		  <li title="genre2"><a href="#"></a></li>
		  <li title="genre3"><a href="#"></a></li>
		  <li title="genre4"><a href="#"></a></li>
		  <li title="genre5"><a href="#"></a></li>
		  <li id="nextGenre"><a href="#">»</a></li>
		</ul>
	</div>
</div>

<div class="menubar-custom" id="menuSection">
  <div class="">
    <ul class="menubar-menu menu-left">
      <li id="musicboard"><a href="musicboard_pagingContent.ju?nowPage=1">음악게시판</a></li>
      <li id="freeboard"><a href="${initParam.root}getContentListPerPage.ju?nowPage=1">자유게시판</a></li>
      <li id="qnaboard"><a href="${initParam.root}getQnAList.ju">Q/A게시판</a></li>
    </ul>
    <ul class="menubar-menu menu-right"> 
      <li class="dropdown" id="rankView">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="rank1">1위</span><b class="caret"></b></a>
        <ul class="dropdown-menu" style="top: 0%; font-size: 12px; left: auto; right: 0;">
        </ul>
      </li>
    </ul>
  </div>
</div>
